<template>
  <div>

    <basic-container>
     <div class="wel-info">
        <div class="user">
          <div class="user-img">
            <span style="user-title">南京市信息中心</span>
            <div class="user-subtitle">online</div>
          </div>
          <div class="user-item"></div>
        </div>
      </div>
      <avue-data-display :option="optionHeader"></avue-data-display>
    </basic-container>

    <basic-container>
      <avue-data-box :option="easyDataOption"></avue-data-box>
    </basic-container>

    <!-- 第三行-->
    <el-row :span="24">

      <!--第一个卡片-->
      <el-col :md="16"
              :xs="24"
              :sm="24">
        <basic-container>
          <avue-data-progress :option="optionPercentage"></avue-data-progress>
          <avue-data-tabs :option="optionDataTabs"></avue-data-tabs>
        </basic-container>
      </el-col>

      <!--第二个卡片-->
      <el-col :md="8"
              :xs="24"
              :sm="24">
        <basic-container>
          <div class="wel-info">
            <span style="user-title">温度统计</span>
           <!-- <avue-data-icons :option="optionIcons"></avue-data-icons>
            <avue-data-icons :option="optionIcons"></avue-data-icons>
            <avue-data-icons :option="optionIcons"></avue-data-icons>
            <avue-data-icons :option="optionIcons"></avue-data-icons>-->
            <avue-echart-line :theme="wonderland" :option="optionline" :data="dataline"  width="100%" height="210"></avue-echart-line>
          </div>

        </basic-container>
      </el-col>

    </el-row>
    <el-dialog
      title="指标走势"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <Dashboard/>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" size="mini" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <!--<basic-container>
      <avue-crud :data="data"
                 :option="tableOption">
        <template slot-scope="scope"
                  slot="username">
          <el-tag>{{scope.row.username}}</el-tag>
        </template>
        <template slot-scope="scope"
                  slot="stars">
          <a :href='scope.row.git'
             target="_blank">
            <img :src="scope.row.stars"
                 alt='star' />
          </a>
        </template>
        <template slot-scope="scope"
                  slot="address">
          <a :href="scope.row.git"
             target="_blank">{{scope.row.address}}</a>
        </template>
      </avue-crud>
    </basic-container>-->
  </div>
</template>
<script>
  export default {
    name: "wel",
    dialogVisible: false,
    data () {
      return {
        tableOption: {
          border: true,
          index: true,
          expand: true,
          stripe: true,
          selection: true,
          page: false,
          menuBtn: true,
          menuAlign: "center",
          align: "center",
          column: [
            {
              label: "用户名",
              prop: "username",
              width: 120,
              span: 24,
              slot: true,
              sortable: true,
              rules: [
                {
                  required: true,
                  message: "请输入用户名",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "类型",
              prop: "type",
              width: 80,
              type: "select",
              sortable: true,
              dicData: [
                {
                  label: "前端",
                  value: 0
                },
                {
                  label: "后端",
                  value: 1
                }
              ]
            },
            {
              label: "stars",
              width: "150",
              prop: "stars",
              sortable: true,
              slot: true
            },
            {
              label: "码云",
              slot: true,
              span: 24,
              prop: "address",
              type: "textarea",
              overHidden: true
            },
            {
              label: "项目介绍",
              width: "300",
              prop: "info",
              editDisabled: true,
              formHeight: 200,
              type: "ueditor",
              span: 24,
              overHidden: true
            }
          ]
        },
        data: [
          {
            username: "lengleng",
            name: "lengleng",
            number: 12,
            type: "0",
            stars: "https://gitee.com/log4j/pig/badge/star.svg?theme=white",
            git: "https://gitee.com/log4j/pig",
            address: "https://gitee.com/log4j",
            info:
              "基于Spring Cloud、OAuth2.0，使用Vue前后分离的开发平台,支持账号、 短信、 SSO等多种登录。 "
          },
          {
            username: "smallwei",
            name: "smallwei",
            number: 20,
            type: "1",
            stars:
              "https://gitee.com/smallweigit/avue/badge/star.svg?theme=white",
            git: "https://gitee.com/smallweigit/avue",
            address: "https://gitee.com/smallweigit",
            info:
              "Avue是一个后台集成解决方案，它基于 Vue.js 和 element。 使用了最新的前端技术栈，支持权限验证，第三方网站嵌套等功能。"
          }
        ],
        theme:'wonderland',
        easyDataOption: {
          data: [
            {
              title: "网管实时告警",
              count: ~~20 + Math.round(Math.random() * 10),
              icon: "icon-cuowu",
              color: "rgb(230, 71, 88)"
            },
            {
              title: "动环实时告警",
              count: ~~20 + Math.round(Math.random() * 10),
              icon: "icon-cuowu",
              color: "rgb(230, 71, 88)"
            },
            {
              title: "运维用户",
              count: 11,
              icon: "icon-shujuzhanshi2",
              color: "rgb(56, 161, 242)"
            }
          ]
        },
        optionHeader: {
          span:6,
          data: [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              count: 1,
              title: '局站数',
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              count: '3',
              title: '机房',
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              count: '792',
              title: 'IT资源在线',
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              count: '113',
              title: '动环设备在线',
            }
          ]
        },
        optionPercentage: {
          span:6,
          data: [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '资源总体健康度',
              color: 'rgb(178, 159, 255)',
              count: 85
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '动环设备总体健康度',
              color:'rgb(178, 159, 255)',
              count: 90,
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '告警处理率',
              color:'rgb(27, 201, 142)',
              count: 99
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '机柜可用率',
              color:'red',
              count: 10
            }
          ]
        },
        optionDataTabs: {
          data: [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '网管采集',
              subtitle: '实时',
              count: 7993,
              allcount: 10222,
              text: '当前采集轮数',
              color: 'rgb(27, 201, 142)',
              key: 'IT'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '动环采集',
              subtitle: '实时',
              count: 908,
              allcount: 10222,
              text: '当前采集轮数',
              color: 'rgb(178, 159, 255)',
              key: 'pe'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '告警平台',
              subtitle: '实时',
              count: 3112,
              allcount: 10,
              text: '待推送',
              color: 'rgb(230, 71, 88)',
              key: 'am'
            }
          ]
        },
        optionIcons: {
          span:10,
          data: [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '告警事件',
              subtitle: 'avue部门-前端研发工程师',
              count: 12678,
              icon: 'el-icon-tickets',
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function () {
                alert();
              },
              title: '今日登录',
              count: 22139,
              icon: 'el-icon-success',
              href:'https://avuejs.com',
              target:'_blank'
            }
          ]
        },
        optionline: {
          switchTheme:true,
          width: 1200,
          height: 600,
          title: '手机大比拼',
          smooth: true,//是否顺滑
          areaStyle: true,//是否面积
        },
        dataline:{
          categories: [
            "前50s",
            "前40s",
            "前30s",
            "前20s",
            "前10s",
            "实时"
          ],
          series: [
            {
              name: "最高温度",
              data: [
                26,
                23,
                29.7,
                28.4,
                23.6,
                24.8
              ]
            }, {
              name: "最低温度",
              data: [
                22,
                20,
                25.7,
                24.4,
                21.6,
                23.8
              ]
            }
          ]
        },

      };
    },
    computed: {
    },
    created () { },
    mounted() {
      this.dialogVisible = true;
    },
    methods: {
      myinit(){
        var i = 0;
        setInterval(function() {
          console.log(i)
          i+=1;
        }, 1000);
      }
    }
  };
</script>

<style  lang="scss">
  .data-icons .item {
    margin: 0;
  }
  .wel-info {
    padding: 26px 0;
    .img-border {
      width: 64px;
      height: 65px;
      position: relative;
      vertical-align: middle;
      display: inline-block;
    }
    .img-v {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 22px;
      height: 22px;
    }
    .img {
      border-radius: 5px;
      width: 64px;
      height: 64px;
      display: inline-block;
      overflow: hidden;
      img {
        display: block;
        max-width: none;
        height: 64px;
        opacity: 1;
        width: 64px;
        margin-left: 0px;
        margin-top: 0px;
      }
    }
    .user {
      margin-left: 20px;
      display: inline-block;
      color: rgb(102, 102, 102);
      font-weight: 600;
      font-family: Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei;
      vertical-align: middle;
      text-align: center;
    }
    .user-title {
      font-size: 20px;
      color: rgb(102, 102, 102);
      font-weight: 600;
      font-family: Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei;
      margin-right: 5px;
      display: inline-block;
      max-width: 200px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .user-subtitle {
      display: inline-block;
      width: 40px;
      height: 16px;
      line-height: 16px;
      border-radius: 2px;
      padding: 0px 5px;
      margin-left: 10px;
      font-size: 12px;
      text-align: center;
      color: rgb(11, 255, 39);
      background-color: rgb(255, 242, 244);
      white-space: nowrap;
    }
    .user-item {
      font-size: 12px;
      line-height: 20px;
    }
  }
</style>
